<template>
	<div class="container">
		<el-row>
			<el-form
				:inline="true"
				:model="listQuery"
				ref="searchForm"
				class="demo-form-inline"
			>
				<el-col :span="18">
					<el-form-item label="分享时间" prop="timeVal">
						<el-date-picker
							v-model="listQuery.timeVal"
							type="daterange"
							range-separator="至"
							start-placeholder="开始日期"
							end-placeholder="结束日期"
							value-format="yyyy-MM-dd"
							@change="getTimeVal"
						></el-date-picker>
					</el-form-item>
					<el-form-item label="诊断人" prop="status">
						<el-input
							placeholder="请输入诊断人"
							v-model="listQuery.custom_query_value"
							autofocus
							clearable
						></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6" class="tr">
					<el-form-item>
						<el-button type="primary" @click="handleRefresh">查询</el-button>
						<el-button type="primary" @click="handleReset('searchForm')"
							>重置</el-button
						>
					</el-form-item>
				</el-col>
			</el-form>
		</el-row>
		<!-- 搜索 -->

		<my-table
			:table-data="tableData"
			:col-configs="colConfigs"
			:list-loading="listLoading"
			:total="total"
			:page-size="listQuery.pagesize"
			:isExpand="true"
			:isExpandOne="true"
			@refreshList="getList"
		>
			<el-table-column label="操作" slot="opt">
				<template slot-scope="{ row }">
					<span v-if="row.status === 0">详情TODO</span>
					<span v-if="row.status === 1">通过TODO</span>
					<span v-if="row.status === 2">拒绝TODO</span>
				</template>
			</el-table-column>
			<el-table-column label="状态" slot="status">
				<template slot-scope="{ row }">
					<span v-if="row.status === 0">已申请</span>
					<span v-if="row.status === 1">已通过</span>
					<span v-if="row.status === 2">已拒绝</span>
					<span v-if="row.status === 3">已解约</span>
				</template>
			</el-table-column>
			<!--展开的列表-->
			<template slot="expand">
				<my-table
					:table-data="tableData2"
					:col-configs="colConfigs2"
					:list-loading="listLoading"
					:total="total2"
					:page-size="listQuery.pagesize"
					@refreshList="getDetailList"
				>
					<el-table-column
						slot="opt"
						label="操作"
						width="120px"
						@click="readDeatil"
					>
						<template slot-scope="{ row }">
							<span
								class
								style="color: #0A70B0; cursor:pointer"
								@click="handleRead(row)"
								>查看诊断意见</span
							>
						</template>
					</el-table-column>
				</my-table>
			</template>
		</my-table>
		<!--- 查看详情-->
		<el-dialog
			title="分享记录详情"
			:visible.sync="dialogFormVisible"
			:inline="true"
		>
			<el-form :model="form">
				<el-form-item label="分享人" :label-width="formLabelWidth">
					<el-input v-model="form.share_user" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="分享人" :label-width="formLabelWidth">
					<el-input v-model="form.share_user" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="分享人" :label-width="formLabelWidth">
					<el-input v-model="form.share_user" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="分享人" :label-width="formLabelWidth">
					<el-input v-model="form.share_user" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="分享人" :label-width="formLabelWidth">
					<el-input v-model="form.share_user" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="分享人" :label-width="formLabelWidth">
					<el-input v-model="form.share_user" autocomplete="off"></el-input>
				</el-form-item>
			</el-form>
		</el-dialog>
	</div>
</template>

<script>
import myTable from 'components/myTable'
import { getMsgList } from '@/api/visit-mg'
export default {
	name: 'MsgManger',
	components: { myTable },
	data () {
		return {
			formLabelWidth: '120px',
			dialogFormVisible: false,
			form: { share_user: 'Russ Strosin' },
			listQuery: {
				pagesize: 10,
				pageindex: 1,
				timeVal: [],
			},
			colConfigs: [
				{
					type: 'index',
					label: '序号',
				},

        /*
         * { slot: 'opt' },
         * { slot: 'status' },
         */
				{
					prop: 'share_user',
					label: '分享人',
					sortable: false,
				},
				{
					prop: 'req_time',
					label: '分享时间',
					sortable: false,
				},
				{
					prop: 'share_doctor',
					label: '分享对象',
					sortable: false,
				},
				{
					prop: 'share_opinion',
					label: '总体书写意见',
					sortable: false,
				},
			],
			colConfigs2: [
				{
					type: 'index',
					label: '序号',
				},
				{ slot: 'opt' },
				{
					prop: 'share_user',
					label: '姓名',
					sortable: false,
				},
				{
					prop: 'share_user',
					label: '病历号',
					sortable: false,
				},
				{
					prop: 'share_user',
					label: '就诊类型',
					sortable: false,
				},
				{
					prop: 'share_user',
					label: '就诊时间',
					sortable: false,
				},
				{
					prop: 'share_user',
					label: '就诊机构',
					sortable: false,
				},
				{
					prop: 'share_user',
					label: '检查类型',
					sortable: false,
				},
				{
					prop: 'share_user',
					label: '检查项目',
					sortable: false,
				},
				{
					prop: 'share_user',
					label: '身份证号',
					sortable: false,
				},
				{
					prop: 'share_user',
					label: '检查号',
					sortable: false,
				},
				{
					prop: 'share_user',
					label: '检查时间',
					sortable: false,
				},
			],
			tableData: [
				{
					hospital_name: '第一医院',
					share_user: '王浩然',
					status: 0,
					share_doctor: '王麻子医生',
					req_time: '2020-12-28',
					share_opinion:
						'A autem laborum ut incidunt recusandae magnam earum. Enim dolorem vel ipsa incidunt saepe qui quaerat nihil. Autem eos neque qui reiciendis suscipit aspernatur laboriosam. Officia id perferendis tempora est quibusdam.',
				},
				{
					hospital_name: '第一1医院',
					share_user: '王浩然',
					status: 3,
					share_doctor: '王麻子医生',
					req_time: '2020-12-28',
					share_opinion:
						'Repellat et veniam tempora libero nam tenetur voluptatem consequatur asperiores. Ipsum veritatis a. Ad est maxime sit nam nulla qui facilis. Nostrum aliquam deleniti pariatur. Laborum labore iusto assumenda voluptatem. Rerum repellat non.',
				},
				{
					hospital_name: '第一1医院',
					share_user: '王浩然',
					status: 0,
					share_doctor: '王麻子医生',
					req_time: '2020-12-28',
					share_opinion:
						'Repudiandae numquam id. Culpa velit optio ullam porro fuga reprehenderit aut. Ut dolores ducimus fugit debitis porro aut in minima repellendus. Non expedita neque. Beatae est nesciunt ut nemo fugiat rerum.',
				},
				{
					hospital_name: '第一医院1',
					share_user: '王浩然',
					req_time: '2020-12-28',
					status: 1,
					share_doctor: '王麻子医生',
					share_opinion:
						'Consequatur minima ipsum aut. Quis est quisquam id laborum vero cumque et similique ea. Minus et aperiam ut similique unde.',
				},
				{
					hospital_name: '第一医院222',
					status: 2,
					share_doctor: '王麻子医生',
				},
			],
			total: 0,
			tableData2: [
				{
					hospital_name: '第一医院',
					share_user: '王浩然',
					patient_id: '0252525W25',
					share_doctor: '王麻子医生',
				},
				{
					hospital_name: '第一1医院',
					share_user: '王浩然',
					patient_id: '3252525W25',
					share_doctor: '王麻子医生',
				},
				{
					hospital_name: '第一1医院',
					share_user: '王浩然',
					patient_id: '0252525W25',
					share_doctor: '王麻子医生',
				},
				{
					hospital_name: '第一医院1',
					share_user: '王浩然',
					patient_id: '1252525W25',
					share_doctor: '王麻子医生',
				},
				{
					hospital_name: '第一医院222',
					patient_id: '2252525W25',
					share_doctor: '王麻子医生',
				},
			],
			total2: 0,
			listLoading: false,
			activeName: 'first',
		}
	},
	computed: {},
	created () { },
	mounted () {
		// this.getList()
	},
	methods: {
		getList ( val ) {

      /*
       * h获取任务统计
       * TODO
       */
			delete this.listQuery.timeVal
			const params = Object.assign( this.listQuery, val )
			console.log( params )
			getMsgList( params ).then( res => {
				if ( res.code === 0 ) {
					this.tableData = res.data.listQuery
					this.total = res.data.total
				}
			} )
		},
		getDetailList () {
			// 获取详情
		},
		handleRefresh () {
			this.getList()
		},
		handleReset ( searchForm ) {
			// 表单重置
			this.$nextTick( () => {
				this.$refs.searchForm.resetFields()
			} )
		},
		readDeatil () {
			// 查看详情
			this.dialogFormVisible = true
		},
	},
}
</script>

<style scoped lang="less">
.container {
	padding: 0 10px;
	.btns {
		margin-bottom: 20px;
	}
	.el-input__inner {
		width: 13.7vw;
	}
}
</style>
